<template>
  <van-swipe-cell>
    <div class="box">
      <div class="left">
        <van-checkbox v-model="whichCheckd[index].checked"
                      checked-color="#ee0a24"
                      @change="checkedChange"
                      ref="checkBox"></van-checkbox>
      </div>
      <div class="right">
        <img :src="item.coverImg==undefined?item.imgUrl:item.coverImg"
             alt=""
             @click="toDetails(goodsId)">
        <!-- 商品详情信息 -->
        <div class="details">
          <p class="name oneLine"
             @click="toDetails(goodsId)">{{item.goodsName==undefined?item.name:item.goodsName}}</p>
          <p class="description oneLine"
             @click="toDetails(goodsId)">{{description}}</p>
          <div class="price">
            <div @click="toDetails(goodsId)">
              <span class="yen">&yen;</span>
              <span>{{item.price}}</span>
            </div>
            <!-- 步进器 -->
            <van-stepper v-model="whichCheckd[index].num"
                         theme="round"
                         button-size="17"
                         disable-input
                         integer
                         @change="changeNum" />
          </div>
        </div>
      </div>
    </div>
    <template #right>
      <van-button square
                  text="删除"
                  type="danger"
                  class="delete-button"
                  @click="deleteShopCard(whichCheckd[index].shopId)"
                  :disabled="isDisable" />
    </template>
  </van-swipe-cell>
</template>

<script>
import { mapState } from 'vuex';
import { getGoodsMsg, changeShopCarNum, deleteShops } from '../../api/api'
export default {
  name: 'SingleOrder',
  props: {
    goodsId: [Number, String],
    item: Object,
    index: Number,
    makesure: {
      type: Boolean,
      default() {
        return true
      }
    }
  },
  computed: {
    ...mapState({
      whichCheckd: state => state.whichCheckd,
      allCheck: state => state.allCheck,
      // saveWhichCheck: state => state.saveWhichCheck
    })
  },
  watch: {
    allCheck: {
      handler(newValue) {
        if (this.$store.state.allNotCheck) {
          this.$refs.checkBox.toggle(newValue)
        }
      }
    }
  },
  data() {
    return {
      value: this.item.num,
      description: "",
      allcheckedNow: false,
      saveChecked: [],
      isDisable: false
    };
  },
  created() {
    getGoodsMsg(this.item.goodsId).then(res => { this.description = res.data.data.intro })
    this.changeVuex()
    let num = 0
    for (let value of this.whichCheckd) {
      if (value.checked) {
        num++
      }
    }
    if (num == this.whichCheckd.length) {
      this.$store.state.allCheck = true
    }
  },
  methods: {
    // 删除商品
    deleteShopCard(cardId) {
      this.$store.state.isDeleting = true
      this.isDisable = true
      deleteShops(cardId).then(res => {
        if (res.data.code == 0) {
          this.$store.state.isDeleting = false
          this.$emit('deleteShopCard')
        }
      })
    },
    // 商品数量的变化情况
    changeNum(value) {
      this.$store.commit('changeCheckedNum', { value, index: this.index })
      changeShopCarNum(this.whichCheckd[this.index].shopId, value)
      this.changeVuex()
    },
    // 检测选中的变化情况
    checkedChange(checked) {
      this.$store.commit('changeCheckedBoolean', { value: checked, index: this.index })
      this.changeVuex()
    },
    changeVuex() {
      let num = 0, sum = 0, arr = [];
      for (let value of this.whichCheckd) {
        if (value.checked) {
          num++
          let many = value.price * value.num
          sum += many
        }
        arr.push(value)
        localStorage.setItem('lastShopCarList', JSON.stringify({ whichCheckd: arr }))
        localStorage.setItem('allPrice', JSON.stringify({ allPrice: sum }))
      }
      if (num == this.whichCheckd.length) {
        this.$store.state.allCheck = true
      } else {
        this.$store.state.allCheck = false
      }
      this.$store.state.checkedNum = num
      this.$store.state.checkedAllPrice = sum
    },
    // 去详情页
    toDetails() {
      this.$router.push({ path: '/goods', query: { goodsId: this.goodsId } })
    }
  }
}
</script>

<style lang='less' scoped>
@themeColor: #ec0d0d;
.box {
  display: flex;
  justify-content: space-between;
  margin: 10px 8px;
  padding: 0 15px;
  background-color: white;
  border-radius: 10px;
}
.delete-button {
  height: 100%;
  border-radius: 15px;
}
img {
  margin: 0 10px;
  width: 35.8%;
  height: 80%;
  border-radius: 5px;
}
.left {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-right: 5px;
}
.right {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-grow: 1;
  min-width: 0;
  .details {
    flex-grow: 1;
    min-width: 0;
    position: relative;
    height: 100%;
    .name {
      position: absolute;
      top: 15%;
      font-size: 14px;
      font-weight: 600;
    }
    .description {
      position: absolute;
      top: 40%;
      color: #909090;
      font-size: 14px;
    }
    .price {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      top: 68%;
      width: 100%;
      color: #e51c23;
      font-size: 18px;
      .yen {
        margin-right: 8px;
        font-size: 12px;
      }
    }
  }
}
</style>